<template>
  <el-card class="result-card">
    <div class="header">
      <h3>模型预测结果</h3>
      <el-tag :type="result.prediction === '健康' ? 'success' : 'danger'" effect="dark" round>
        {{ result.prediction }}
      </el-tag>
    </div>

    <div class="prediction-info">
      置信度: <el-progress
        :percentage="result.confidence * 100"
        :color="customColors"
        :show-text="false"
        class="confidence-bar"
    />
      <span class="confidence-value">{{ (result.confidence * 100).toFixed(3) }}%</span>
    </div>

    <el-table :data="tableData" style="margin-top: 25px" class="result-table">
      <el-table-column prop="class" label="类别" width="180">

      </el-table-column>
      <el-table-column prop="t2t" label="T2T-ViT 置信度">
        <template #default="{ row }">
          <span class="confidence-value">{{ row.t2t }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="vit_base" label="ViT-base 置信度">
        <template #default="{ row }">
          <span class="confidence-value">{{ row.vit_base }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="vit_lite" label="ViT-lite 置信度">
        <template #default="{ row }">
          <span class="confidence-value">{{ row.vit_lite }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps(['result'])

const tableData = computed(() => {
  if (!props.result) return [];

  // 获取所有类别（使用vit的类别作为基准）
  const classes = Object.keys(props.result.vitBaseProbabilities);

  return classes.map(className => ({
    class: className,
    t2t: props.result.t2tProbabilities[className]?.toFixed(3) || '0.000',
    vit_base: props.result.vitBaseProbabilities[className]?.toFixed(3) || '0.000',
    vit_lite: props.result.vitLiteProbabilities[className]?.toFixed(3) || '0.000'
  })).sort((a, b) => b.t2t - a.t2t);
})


const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#198754', percentage: 80 },
  { color: '#2c6e49', percentage: 100 }
]
</script>

<style scoped>
.result-card {
  margin-top: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-top: 3px solid #2c6e49;
}

.header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.header h3 {
  margin: 0;
  font-size: 1.3rem;
  color: #2c6e49;
  font-weight: 600;
}

.prediction-info {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 500;
  color: #444;
}

.confidence-bar {
  flex: 1;
  max-width: 300px;
}

.confidence-value {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #2c6e49;
}

.healthy-class {
  color: #198754;
  font-weight: 500;
}

.disease-class {
  color: #e6a23c;
  font-weight: 500;
}

:deep(.result-table .el-table__header th) {
  background-color: #f0f7ee;
  color: #2c6e49;
  font-weight: 600;
}

:deep(.result-table .el-table__row:hover) {
  background-color: #f8fff6;
}

:deep(.result-table .el-table__row) {
  transition: background-color 0.3s ease;
}

:deep(.result-table .el-table__cell) {
  padding: 12px 0;
}
</style>